<template>
    <div class="app-container">
        <el-descriptions :column="2" border>
            <el-descriptions-item label="活动名称">{{ activityInfo.activityName }}</el-descriptions-item>
            <el-descriptions-item label="活动类型">{{ activityInfo.typeName }}</el-descriptions-item>
            <el-descriptions-item label="活动开始时间">{{ formatDateTime(activityInfo.activityStartTime)
                }}</el-descriptions-item>
            <el-descriptions-item label="活动结束时间">{{ formatDateTime(activityInfo.activityEndTime)
                }}</el-descriptions-item>
            <el-descriptions-item label="活动地点">{{ activityInfo.location }}</el-descriptions-item>
            <el-descriptions-item label="参与人数">{{ activityInfo.currentParticipants || 0 }}/{{
                activityInfo.maxParticipants }}</el-descriptions-item>
            <el-descriptions-item label="主持人">{{ activityInfo.hostMemberName }}</el-descriptions-item>
            <el-descriptions-item label="活动状态">
                <el-tag :type="getStatusType(activityInfo.status)">
                    {{ getStatusLabel(activityInfo.status) }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="活动描述" :span="2">
                {{ activityInfo.description }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import ActivityAPI from '@/api/activity.api';
const props = defineProps({
    activeId: {
        type: String,
        default: ""
    }
})
// 活动信息
const activityInfo = ref({});
// 参与记录列表
const participantList = ref([]);

// 加载状态
const participantLoading = ref(false);

// 活动状态选项
const activityStatusOptions = ref([
    { value: 'PLANNED', label: '计划中' },
    { value: 'ONGOING', label: '进行中' },
    { value: 'COMPLETED', label: '已完成' },
    { value: 'CANCELLED', label: '已取消' }
]);

// 获取活动详情
const getActivityDetail = async () => {
    try {
        const res = await ActivityAPI.getActivityForm(props.activeId);
        if (res) {
            activityInfo.value = res;
        } else {
            ElMessage.error(res.msg || '获取活动详情失败');
        }
    } catch (error) {
        console.error('获取活动详情失败', error);
        ElMessage.error('获取活动详情失败');
    }
};

// 获取参与记录列表
// const getParticipantList = async () => {
//   participantLoading.value = true;
//   try {
//     const res = await ActivityAPI.getActivityParticipantPage({
//       pageNum: 1,
//       pageSize: 100,
//       activityId: activityId.value
//     });
//     if (res.code === '200') {
//       participantList.value = res.data.list;
//     }
//   } catch (error) {
//     console.error('获取参与记录失败', error);
//   } finally {
//     participantLoading.value = false;
//   }
// };

// 格式化日期时间
const formatDateTime = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return '';
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 获取状态类型
const getStatusType = (status) => {
    switch (status) {
        case '计划中': return 'info';
        case '进行中': return 'success';
        case 'COMPLETED': return 'primary';
        case 'CANCELLED': return 'danger';
        default: return 'info';
    }
};

// 获取状态标签
const getStatusLabel = (status) => {
    const option = activityStatusOptions.value.find(item => item.value === status);
    return option ? option.label : status;
};

onMounted(() => {
    getActivityDetail();
    //   getParticipantList();
});
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mt10 {
    margin-top: 10px;
}

.mt20 {
    margin-top: 20px;
}

.text-right {
    text-align: right;
}
</style>